<template>
  <div class="account-closing-setting">
    <h3>封账设置</h3>
    <el-tabs v-model="activeTab">
      <!-- 封账规则 -->
      <el-tab-pane label="封账规则" name="rules">
        <div class="operation-bar">
          <el-button type="primary" size="small" @click="handleAddRule">新建</el-button>
          <el-input
            v-model="searchKeyword"
            placeholder="搜索规则名称"
            style="width: 200px; margin-left: 16px"
            clearable
            @clear="handleSearch"
            @keyup.enter.native="handleSearch"
          >
            <el-button slot="append" icon="el-icon-search" @click="handleSearch" />
          </el-input>
        </div>

        <el-table :data="filteredRules" border style="width: 100%; margin-top: 16px">
          <el-table-column prop="name" label="规则名称" width="180" />
          <el-table-column prop="status" label="状态" width="100">
            <template slot-scope="scope">
              <el-tag :type="scope.row.status === 'active' ? 'success' : 'info'">
                {{ scope.row.status === 'active' ? '启用' : '禁用' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="closingTime" label="封账时间" width="180" />
          <el-table-column prop="dateRange" label="封账日期范围" width="200">
            <template slot-scope="scope">
              {{ scope.row.startDate }} 至 {{ scope.row.endDate }}
            </template>
          </el-table-column>
          <el-table-column prop="applicableRange" label="适用人员范围" />
          <el-table-column prop="manager" label="负责人" width="120" />
          <el-table-column label="操作" width="150" fixed="right">
            <template slot-scope="scope">
              <el-button type="text" @click="handleEditRule(scope.row)">编辑</el-button>
              <el-button 
                type="text" 
                class="delete-btn" 
                @click="handleDeleteRule(scope.$index)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>

      <!-- 临时解封 -->
      <el-tab-pane label="临时解封" name="temporary">
        <div class="operation-bar">
          <el-button type="primary" size="small" @click="handleAddTemporary">申请解封</el-button>
        </div>

        <el-table :data="temporaryRecords" border style="width: 100%; margin-top: 16px">
          <el-table-column prop="applicant" label="申请人" width="120" />
          <el-table-column prop="reason" label="解封原因" />
          <el-table-column prop="dateRange" label="解封时间范围" width="200">
            <template slot-scope="scope">
              {{ scope.row.startDate }} 至 {{ scope.row.endDate }}
            </template>
          </el-table-column>
          <el-table-column prop="status" label="状态" width="100">
            <template slot-scope="scope">
              <el-tag :type="getStatusType(scope.row.status)">
                {{ getStatusText(scope.row.status) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="approver" label="审批人" width="120" />
          <el-table-column prop="createTime" label="申请时间" width="180" />
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  name: 'AccountClosingSetting',
  data() {
    return {
      activeTab: 'rules',
      searchKeyword: '',
      rules: [
        {
          name: '月度工资封账',
          status: 'active',
          closingTime: '每月25日',
          startDate: '2024-01-01',
          endDate: '2024-12-31',
          applicableRange: '全体员工',
          manager: '张三'
        }
      ],
      temporaryRecords: [
        {
          applicant: '李四',
          reason: '数据录入错误需要修正',
          startDate: '2024-03-20',
          endDate: '2024-03-21',
          status: 'pending',
          approver: '-',
          createTime: '2024-03-19 14:30:00'
        }
      ]
    }
  },
  computed: {
    filteredRules() {
      if (!this.searchKeyword) return this.rules
      return this.rules.filter(rule =>
        rule.name.toLowerCase().includes(this.searchKeyword.toLowerCase())
      )
    }
  },
  methods: {
    handleAddRule() {
      // TODO: 实现新建规则功能
      console.log('新建规则')
    },
    handleEditRule(rule) {
      // TODO: 实现编辑规则功能
      console.log('编辑规则:', rule)
    },
    handleDeleteRule(index) {
      this.$confirm('确定要删除该规则吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.rules.splice(index, 1)
        this.$message.success('规则已删除')
      }).catch(() => {})
    },
    handleSearch() {
      // 搜索功能已通过计算属性实现
    },
    handleAddTemporary() {
      // TODO: 实现申请解封功能
      console.log('申请解封')
    },
    getStatusType(status) {
      const types = {
        pending: 'warning',
        approved: 'success',
        rejected: 'danger'
      }
      return types[status] || 'info'
    },
    getStatusText(status) {
      const texts = {
        pending: '待审批',
        approved: '已通过',
        rejected: '已拒绝'
      }
      return texts[status] || status
    }
  }
}
</script>

<style scoped>
.account-closing-setting {
  padding: 20px;
}

.operation-bar {
  margin-bottom: 16px;
  display: flex;
  align-items: center;
}

.delete-btn {
  color: #F56C6C;
}

.delete-btn:hover {
  color: #F78989;
}
</style>